<script lang="ts" setup>
import { ref, watch } from "vue";
import { CalendarOptions } from "@fullcalendar/core";
import FullCalendar from "@fullcalendar/vue3"; // 核心库
import InteractionPlugin from "@fullcalendar/interaction"; // 交互库
import MomentPlugin from "@fullcalendar/moment"; // 格式化时间库。可以在插件使用YYYY MM
import DaygridPlugin from "@fullcalendar/daygrid"; // 月视图
import { ElMessage } from "element-plus";

const selected = ref();
const startTime = ref();
const endTime = ref();
const dialogVisible = ref(false);
const matchList = ref<any>([]); //日历数据
const constantsList = [
  {
    title: "开始时间：10:00；结束时间：11:00",
    start: "2024-04-03",
    end: "2024-04-04",
  },
  {
    title: "开始时间：10:00；结束时间：11:00",
    start: "2024-04-02",
    end: "2024-04-05",
  },
];

const calendarOptions = ref<CalendarOptions>({
  locale: ["zh"],
  plugins: [InteractionPlugin, MomentPlugin, DaygridPlugin],
  initialView: "dayGridMonth",
  editable: true,
  eventClassNames: "test",
  dayMaxEventRows: 5,
  events: matchList.value, //绑定展示事件
  selectable: true,
  /**
   * 选中回调
   * @param info
   */
  select: (info) => {
    console.log(info);
    dialogVisible.value = true;
    // console.log(info);
    selected.value = info;
  },
  /**
   * 点击日程
   * @param info
   */
  eventClick: (info) => {
    // console.log(info.event);
    selected.value = info.event;
    // 回显选中时间
    const arr = info.event.title.split("-");
    startTime.value = arr[0];
    endTime.value = arr[1];
    dialogVisible.value = true;
    console.log(info.event);
  },
});

const handleClose = (done: () => void) => {
  done();
};

/**
 * 保存日期信息
 */
const saveInfo = () => {
  if (!startTime.value || !endTime.value) {
    ElMessage({
      message: "请选择完整时间段",
      type: "warning",
    });
    return;
  }
  if (calendarOptions.value.events) {
    const title = `${startTime.value} - ${endTime.value}`;
    if (selected.value.id) {
      // 修改
      const index = matchList.value.findIndex(
        (item: any) => item.id == selected.value.id
      );
      matchList.value[index].start = selected.value.startStr;
      matchList.value[index].end = selected.value.endStr;
      matchList.value[index].title = title;
    } else {
      // 新增数据
      matchList.value.push({
        id: new Date().getTime(),
        title,
        start: selected.value.startStr,
        end: selected.value.endStr,
      });
    }
  }
  dialogVisible.value = false;
  // 清空数据
  startTime.value = "";
  endTime.value = "";
};

/**
 * 删除数据
 */
const delEvent = () => {
  const index = matchList.value.findIndex(
    (item: any) => item.id == selected.value.id
  );
  matchList.value.splice(index);
  dialogVisible.value = false;
};

/**
 * iframe传递消息
 */
watch(
  () => matchList.value,
  (val) => {
    console.log("传递消息");
    window.parent.postMessage(JSON.stringify(val), "*");
  },
  { deep: true }
);
</script>

<template>
  {{ matchList }}
  <FullCalendar :options="calendarOptions" />
  <el-dialog
    v-model="dialogVisible"
    title="选择时间"
    width="500"
    :before-close="handleClose"
  >
    <div class="timeSelectBox">
      <el-time-select
        v-model="startTime"
        style="width: 240px"
        start="08:00"
        step="00:30"
        end="21:30"
        :max-time="endTime"
        placeholder="开始时间"
      />
      <span class="text">到</span>
      <el-time-select
        v-model="endTime"
        style="width: 240px"
        :min-time="startTime"
        placeholder="结束时间"
        start="08:30"
        step="00:30"
        end="22:00"
      />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">返回</el-button>
        <el-button type="danger" @click="delEvent">删除</el-button>
        <el-button type="primary" @click="saveInfo"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss">
.timeSelectBox {
  display: flex;
  align-items: center;
  gap: 10px;
}

.test {
  .fc-event-title {
  }
}
</style>
